<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>我的卡券</title>
<link rel="stylesheet" href="__HOME__/css/public_style.css">
<style>
	html,body{width:100%;height:100%;}
	body{background-color:#f4f5fa;}
	/*-- 返回 --*/
	.ding_bg{
		height:52px;
		background-image: -moz-linear-gradient( 0deg, rgb(26,85,203) 0%, rgb(110,119,255) 100%);
		background-image: -webkit-linear-gradient( 0deg, rgb(26,85,203) 0%, rgb(110,119,255) 100%);
		background-image: -ms-linear-gradient( 0deg, rgb(26,85,203) 0%, rgb(110,119,255) 100%);
	}
	.ding_bg>p{text-align:center;color:#fff;float:left;width:calc(100% - 104px);line-height:52px;}
	.fanhui{padding:20px;height:12px;width:12px;display:block;float:left;}
	.fanhui>div{border-top:2px solid #fff;border-left:2px solid #fff;height:10px;width:10px;transform:rotate(-45deg);}
	/*-- 返回 --*/
	/*-- 卡券内容 --*/
	.coupon_box{padding:0 15px;margin-top:15px;height:calc(100% - 82px);overflow:auto;}
	.coupon_box>ul>li{padding-bottom:10px;overflow:hidden;}
	.coupon_box>ul>li>div:nth-of-type(1){float:left;width:110px;height:96px;background:#fff url(__HOME__/img/coupon_tu.png) no-repeat;border-top-left-radius:5px;border-bottom-left-radius:5px;}
	.coupon_box>ul>li>div:nth-of-type(1)>p{line-height:70px;text-align:center;color:#fff;font-size:22px;}
	.coupon_box>ul>li>div:nth-of-type(2){float:left;width:calc(100% - 110px);height:96px;background:#fff url(__HOME__/img/coupon_tu02.png) no-repeat top right;border-top-right-radius:5px;border-bottom-right-radius:5px;}
	.coupon_box>ul>li>div:nth-of-type(2)>div{line-height:30px;margin-left:10px;padding:10px 0 25px;}
	.coupon_box>ul>li>div:nth-of-type(2)>p{border-top:1px solid #e4e4e4;font-size:12px;line-height:30px;margin:0 10px;}
	
	.yishiyong>div{filter:grayscale(100%);}
	.yishiyong>div:nth-of-type(2){background-position-Y:-96px!important;}
	/*-- 卡券内容 --*/
</style>
</head>

<body>
	<!-- 返回 -->
	<div class="ding_bg">
		<a href="{:url('personal')}" class="fanhui"><div></div></a>
		<p>我的卡券</p>
		<h6 class="clearfix"></h6>
	</div>
	<!-- 返回 -->
	<!-- 卡券内容 -->
	<div class="coupon_box">
		<ul>
			<li>
				<div>
					<p>￥100</p>
				</div>
				<div>
					<div>某某某某123</div>
					<p>满100减20 仅适用于美食消费</p>
				</div>
				<h6 class="clearfix"></h6>
			</li>
			<li class="yishiyong">
				<div>
					<p>￥100</p>
				</div>
				<div>
					<div>某某某某123</div>
					<p>满100减20 仅适用于美食消费</p>
				</div>
				<h6 class="clearfix"></h6>
			</li>
			<li>
				<div>
					<p>￥100</p>
				</div>
				<div>
					<div>某某某某123</div>
					<p>满100减20 仅适用于美食消费</p>
				</div>
				<h6 class="clearfix"></h6>
			</li>
			<li>
				<div>
					<p>￥100</p>
				</div>
				<div>
					<div>某某某某123</div>
					<p>满100减20 仅适用于美食消费</p>
				</div>
				<h6 class="clearfix"></h6>
			</li>
		</ul>
	</div>
	<!-- 卡券内容 -->
</body>
<script src="__HOME__/js/jquery-3.3.1.js"></script>
<script>
</script>
</html>
